<!-- 产品管理 - 价格体系 - 列表 -->
<template>
  <div class="price-maintenance">
    <el-container class="container-box">
      <el-header height="auto">
        <form-renderer
          class="form"
          :content="searchContent"
          label-position="right"
          inline
          ref="searchForm"
        >
          <el-form-item>
            <el-button
              type="primary"
              @click="getPriceList"
              size="small"
              :class="{'isAddWidth':submitLoading}"
              :loading="submitLoading"
            >
              <i
                class="iconfont el-icon-search"
                :class="{'isdisplay':submitLoading}" />
              {{ submitLoading?'':'查询' }}</el-button>
            <el-button
              @click="resetForm"
              size="small">
              <i class="iconfont el-icon-refresh-right"/>
              重置</el-button>
          </el-form-item>
        </form-renderer>
      </el-header>
      <el-editable
        class="table-list"
        :data="priceData"
        height="200"
        v-loading="tableLoading"
        :columns="priceColumns"
      >
        <!-- 序号 -->
        <template
          slot="default-order"
          slot-scope="scope">{{ scope.$index + 1 }}</template>
        <!-- 操作 -->
        <template
          slot="default-options"
          slot-scope="scope">
          <el-button
            size="small"
            @click.stop="goPriceOps(scope)"
            type="text">销售价格设置</el-button>
        </template>
        <!-- 采购价格 -->
        <template
          slot="default-purchasePrice"
          slot-scope="scope">
          <div class="corver-box">
            <div class="input-corver">
              <el-input
                v-model="scope.row.purchasePrice"
                :disabled="!scope.row.purchasePriceBol" />
            </div>
            <!-- 是否能修改采购价  0-否 1-是 -->
            <el-button
              size="small"
              @click.stop="changePurchasePrice(scope)"
              type="text"
              v-if="scope.row.canChangePurchasePrice != 0"
            >{{ scope.row.purchasePriceBol ? '确定':'编辑' }}</el-button>
          </div>
        </template>
        <!-- 销售通用价格 -->
        <template
          slot="default-commonPrice"
          slot-scope="scope">
          <div class="corver-box">
            <div class="input-corver">
              <el-input
                v-model="scope.row.commonPrice"
                type="number"
                :disabled="!scope.row.commonPriceBol"
              />
            </div>
            <el-button
              size="small"
              @click.stop="changeCommonPrice(scope)"
              type="text"
            >{{ scope.row.commonPriceBol ? '确定':'编辑' }}</el-button>
          </div>
        </template>
        <!-- 销售通用促销价 -->
        <template
          slot="default-commonPromotionPrice"
          slot-scope="scope">
          <div class="corver-box">
            <div class="input-corver">
              <el-input
                v-model="scope.row.commonPromotionPrice"
                type="number"
                :disabled="!scope.row.commonPromotionPriceBol"
              />
            </div>
            <el-button
              size="small"
              @click.stop="changePromotionPric(scope)"
              type="text"
            >{{ scope.row.commonPromotionPriceBol ? '确定':'编辑' }}</el-button>
          </div>
        </template>
        <!-- 销售通用促销价开关 -->
        <template
          slot="default-isPromotion"
          slot-scope="scope">
          <el-switch
            v-model="scope.row.isPromotionChecked"
            @change="changePromotionSwitch(scope)" />
        </template>
      </el-editable>
      <div class="page-box">
        <el-pagination
          align="right"
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.curPage"
          :page-sizes="PAGE_NUMBER"
          :page-size="page.pageSize"
          :layout="PAGINATION_LAYOUT"
          :total="page.total"
        />
      </div>
    </el-container>
  </div>
</template>

<script>
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common.js'
import { priceColumns, searchContent } from './const.js'
import ElEditable from '@components/el-editable/index.vue'
import FormRenderer from '@femessage/el-form-renderer'
import {
  productCommonPriceList,
  productCommonPriceUpdate
} from '@const/beforeSettleApi.js'
import { cloneDeep, hasIn } from 'lodash'
export default {
  name: 'PriceMaintenance',
  components: { ElEditable, FormRenderer },
  data () {
    return {
      submitLoading: false,
      PAGE_NUMBER,
      PAGINATION_LAYOUT,
      priceColumns,
      searchContent,
      tableLoading: false,
      priceData: [],
      page: {
        curPage: 1,
        pageSize: PAGE_NUMBER[0],
        total: 0
      }
    }
  },
  methods: {
    handleSizeChange (item) {
      this.page.pageSize = item
      this.getPriceList()
    },
    handleCurrentChange (item) {
      this.page.curPage = item
      this.getPriceList()
    },
    getPriceList () {
      let params = this.$refs.searchForm.getFormValue()
      this.tableLoading = true
      this.submitLoading = true
      this.$axios({
        method: 'post',
        url: productCommonPriceList,
        data: params
      })
        .then(res => {
          let arr = hasIn(res, ['data', 'payload'])
            ? res.data.payload.content
            : []
          this.priceData = arr
          this.priceData.forEach((item, index) => {
            // 设置每行需要的内容
            this.$set(item, 'purchasePriceBol', false)
            this.$set(item, 'commonPriceBol', false)
            this.$set(item, 'commonPromotionPriceBol', false)
            if (!item.isPromotion || item.isPromotion === 0) {
              this.$set(item, 'isPromotionChecked', false)
            } else {
              this.$set(item, 'isPromotionChecked', true)
            }
          })
          this.page.total = res.data.payload.totalElements
        })
        .catch(() => {})
        .finally(() => {
          this.tableLoading = false
          this.submitLoading = false
        })
    },
    resetForm () {
      this.$refs.searchForm.resetFields()
      this.getPriceList()
    },
    changePurchasePrice (scope) {
      if (this.priceData[scope.$index].purchasePriceBol) {
        this.setChangeItems(scope)
      }
      this.priceData[scope.$index].purchasePriceBol = !this.priceData[scope.$index].purchasePriceBol
    },
    changeCommonPrice (scope) {
      if (this.priceData[scope.$index].commonPriceBol) {
        this.setChangeItems(scope)
      }
      this.priceData[scope.$index].commonPriceBol = !this.priceData[scope.$index].commonPriceBol
    },
    changePromotionPric (scope) {
      if (this.priceData[scope.$index].commonPromotionPriceBol) {
        this.setChangeItems(scope)
      }
      this.priceData[scope.$index].commonPromotionPriceBol = !this.priceData[scope.$index].commonPromotionPriceBol
    },
    changePromotionSwitch (scope) {
      console.log(scope.row.isPromotionChecked)
      if (scope.row.isPromotionChecked) {
        scope.row.isPromotion = 1
      } else {
        scope.row.isPromotion = 0
      }
      this.setChangeItems(scope)
    },
    setChangeItems (scope) {
      let params = {
        id: scope.row.id,
        purchasePrice: scope.row.purchasePrice,
        commonPrice: scope.row.commonPrice,
        isPromotion: scope.row.isPromotion,
        commonPromotionPrice: scope.row.commonPromotionPrice
      }
      this.$axios({
        method: 'post',
        url: productCommonPriceUpdate,
        data: params
      })
        .then(res => {
          this.$message({ type: 'success', message: '修改成功' })
        })
        .catch(() => {
          this.$message({ type: 'warning', message: '修改失败' })
          this.getPriceList()
        })
    },
    goPriceOps (scope) {
      this.$router.push({
        path: '/distributorSide/basicInfoManagement/price/setting',
        query: {
          // 这是获取列表需要的参数
          itemId: scope.row.itemId,
          unitId: scope.row.unitId,
          consumerName: scope.row.companyName,
          // 这是跳转页面要用到的基本信息
          productName: scope.row.productName,
          category: scope.row.category,
          spec: scope.row.spec,
          certificateNumber: scope.row.certificateNumber,
          platCode: scope.row.platCode
        }
      })
    }
  },
  mounted () {
    this.getPriceList()
  }
}
</script>

<style lang="less">
.price-maintenance {
  height: 100%;
  display: flex;

  .container-box {
    flex-direction: column;

    .page-box {
      margin-top: 20px;
    }
  }

  .corver-box {
    display: flex;
    align-items: center;
  }

  .input-corver {
    display: flex;
    align-items: center;
    margin-right: 10px;
  }
}
</style>
